<template>
	<view>
		<xl-navbar :title="title"></xl-navbar>
		<view class="search-input-box">
			<view v-if="typeOptions.length > 0" class="search-input-box-type">
				<view class="search-input-box-title" @click="showPicker = true">{{ typeOptions[cur].label }}</view>
				<xl-icon :name="showPicker ? 'xl-up-fill' : 'xl-down-fill'" size="13" :color="color" left="2" right="2" @click="showPicker = true" />
			</view>
			<xl-search style="flex: 1" v-model="keywords" :placeholder="placeholder" background="#f9f9f9" width="100%" @change="handleInput" @search="handleSearch" />
		</view>
		<!-- 搜索提示 -->
		<view v-if="searchList.length > 0" class="search-list-box">
			<view class="search-list-content">
				<view v-for="(item, index) in searchList" :key="item+index" class="search-list-item"
					@click="chooseSearchItem(item)">
					<xl-icon name="xl-search" size="18" color="#aaa" right="10" />
					<xl-text-light :text="item[searchListProp]||item" :keyword="keywords" />
				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view v-show="searchHistory && searchHistory.length > 0" class="search-history-box">
			<view class="search-history-title">
				<text>搜索历史</text>
				<view class="history-title-ops">
					<view v-if="deleteHistory" @click="clearSearchHistory">一键清空</view>
					<view v-else-if="historyHeight > 240" class="history-title-ops-hidden" @click="historyOpen = !historyOpen">
						<view>{{ historyOpen ? '收起':'展开' }}</view>
						<xl-icon :name="historyOpen ? 'xl-up':'xl-down'" left="5" size="12" />
					</view>
					<xl-line v-show="historyHeight > 240 || deleteHistory" direction="col" margin="0 20rpx" length="30rpx" :thin="false" />
					<xl-icon v-show="!deleteHistory" name="xl-del" right="10" @click="deleteHistory = true" />
					<view v-show="deleteHistory" @click="deleteHistory = false">完成</view>
				</view>
			</view>
			<view class="history-content" :style="{height: historyHeight > 240 && !historyOpen ? '225rpx': historyHeight+'rpx'}">
				<view class="history-content-items">
					<view class="capsule-item" v-for="(history, idx) in searchHistory" :key="idx"
						@click="deleteHistory ? handleDeleteItem(idx):handleSearch(history)">
						{{ history }}
						<view v-if="deleteHistory" class="capsule-item-delete" @click.stop="handleDeleteItem(idx)">
							<xl-icon name="xl-close" size="12" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="hotMode === 'capsule'" class="search-history-box">
			<view class="search-history-title">{{hotTip}}</view>
			<view class="history-content">
				<view class="history-content-items">
					<view class="capsule-item" v-for="(item, idx) in hotData" :key="idx" @click="handleSearch(item)">
						{{ item.name || item }}
					</view>
				</view>
			</view>
		</view>

		<view v-else-if="hotMode === 'card'" class="hot-search-card-wrap">
			<image class="hot-search-card-bg" src="../../static/imgs/img/search.jpg"></image>
			<view class="hot-search-card-title">
				<xl-icon class="hot-search-card-icon" name="xl-hot" color="#F96E11" size="18" left="5" top="1"></xl-icon>
				<div class="hot-search-card-title-text">{{hotTip}}</div>
			</view>
			<view class="hot-search-card-content">
				<view class="hot-search-card-item" v-for="(item, idx) in hotData" :key="idx"
					@click="handleSearch(item)">
					<view class="hot-search-card-item-index">{{ idx + 1 }}</view>
					<view class="hot-search-card-item-content">{{ item.name || item }}</view>
				</view>
			</view>
		</view>

		<view v-else-if="hotMode === 'card-image'" class="hot-search-card-wrap">
			<image class="hot-search-card-bg" src="../../static/imgs/img/search.jpg"></image>
			<view class="hot-search-card-title">
				<xl-icon class="hot-search-card-icon" name="xl-hot" color="#F96E11" size="18" left="5" top="1"></xl-icon>
				<div class="hot-search-card-title-text">{{hotTip}}</div>
			</view>
			<view class="hot-search-card-image-content">
				<view class="hot-search-card-item" v-for="(item, idx) in hotData" :key="idx"
					@click="handleSearch(item)">
					<view class="hot-search-card-item-index">{{ idx + 1 }}</view>
					<image :src="item.img" class="hot-search-card-item-image" />
					<view class="hot-search-card-item-content">
						<view class="hot-search-card-item-title">{{ item.name }}</view>
						<view class="hot-search-card-item-describe">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</view>
		<xl-picker :default-value="[curTpye]" v-model="showPicker" :options="typeOptions" labelName="label"
			valueName="value" :show-choose="false" choose-padding="0" font-size="30rpx" :modal-close="true"
			@change="changeType"></xl-picker>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted, watch, nextTick, getCurrentInstance } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['search', 'changeType', 'loadSearch'])

	// 当前搜索类型Index
	const cur = ref(0)
	const curTpye = ref('')
	const showPicker = ref(false)
	const typeOptions = ref([])

	// 搜索提示列表
	const searchList = ref([])
	const searchListTop = ref(0)

	// 搜索历史Key
	let historyKey = ''
	const searchHistory = ref([])
	const historyHeight = ref(0)
	const historyOpen = ref(false)
	const instance = getCurrentInstance();

	onMounted(() => {
		props.types.forEach(type => {
			typeOptions.value.push({
				label: typeof type === 'string' ? type : type.label,
				value: typeof type === 'string' ? type : type.value
			})
		})
		curTpye.value = typeOptions.value.length > 0 ? typeOptions.value[cur.value].value : ''

		searchListTop.value = uni.getWindowInfo().statusBarHeight + uni.$xl.upx2px(180) + 'px'

		historyKey = `${ uni.$xl.currentPage() }-${ curTpye.value }`
		searchHistory.value = uni.getStorageSync(historyKey) || []
		calcHistoryHeight()
	})

	const keywords = ref('')

	// 切换搜索类型
	function changeType(value) {
		cur.value = typeOptions.value.findIndex(item => item.value === value[0]);
		curTpye.value = value[0]
		historyKey = `${ uni.$xl.currentPage() }-${ curTpye.value }`
		searchHistory.value = uni.getStorageSync(historyKey) || []
		if (keywords.value.trim() !== '' && props.searchTip) handleInput(keywords.value)
		emits('changeType', curTpye.value)
	}
	// 输入关键字，若需要展示搜索提示列表，则触发loadSearch，加载提示列表
	function handleInput(value) {
		searchList.value = []
		if (value.trim() === '') return
		if (props.searchTip) emits("loadSearch", {
			type: curTpye.value,
			keywords: value.trim()
		}, data => searchList.value = data)
	}
	// 触发搜索
	function handleSearch(value) {
		keywords.value = value
		if (keywords.value === '') keywords.value = props.placeholder
		addSearchHistory(keywords.value)
		searchList.value = []
		emits('search', {
			type: curTpye.value,
			keywords: keywords.value
		})
	}
	// 点击搜索提示列表项
	function chooseSearchItem(item) {
		keywords.value = item[props.searchListProp] || item
		addSearchHistory(keywords.value)
		searchList.value = []
		emits("search", {
			type: curTpye.value,
			keywords: keywords.value,
			data: item
		})
	}

	// 计算历史高度
	function calcHistoryHeight() {
		nextTick(() => {
			uni.createSelectorQuery().in(instance).select('.history-content-items').boundingClientRect((data) => {
				historyHeight.value = uni.$xl.px2upx(data.height);
			}).exec();
		})
	}

	// 执行搜索，添加至搜索历史
	function addSearchHistory(keyword) {
		searchHistory.value.unshift(keyword)
		searchHistory.value = searchHistory.value.filter((item, index) => index === 0 || item !== keyword)
		uni.setStorageSync(historyKey, searchHistory.value)
		calcHistoryHeight()
	}

	// 开启删除历史模式
	const deleteHistory = ref(false)
	// 一键删除
	function clearSearchHistory() {
		searchHistory.value = []
		uni.removeStorageSync(historyKey)
		deleteHistory.value = false
		calcHistoryHeight()
	}
	// 删除一项历史
	function handleDeleteItem(index) {
		searchHistory.value.splice(index, 1)
		if (searchHistory.value.length === 0) deleteHistory.value = false
		uni.setStorageSync(historyKey, searchHistory.value)
		calcHistoryHeight()
	}

</script>

<style lang="scss" scoped>
	@mixin overflow-ellipsis {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.search-input-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90rpx;
		padding: 0 30rpx;

		.search-input-box-type {
			display: flex;
			flex-direction: row;
			align-items: center;

			.search-input-box-title {
				font-size: 28rpx;
				color: v-bind(color);
			}
		}
	}

	.search-list-box {
		position: absolute;
		top: v-bind(searchListTop);
		width: 100%;
		height: calc(100% - v-bind(searchListTop));
		background-color: #ffffff;
		overflow: hidden;
		z-index: 66;

		.search-list-content {
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			height: 100%;
			width: 100%;
			padding-left: 10rpx;
		}

		.search-list-item {
			display: flex;
			box-sizing: border-box;
			align-items: center;
			padding: 20rpx 10rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #f6f6f6;
		}
	}

	.search-history-box {
		width: 690rpx;
		margin: 20rpx 30rpx;
		position: relative;
		$item-height: 50rpx;
		$max-line: 3;

		.search-history-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666;
			font-size: 30rpx;
			height: 50rpx;
			padding-bottom: 20rpx;

			.history-title-ops {
				display: flex;
				align-items: center;

				.history-title-ops-hidden {
					font-size: 26rpx;
					display: flex;
				}
			}
		}



		.history-content {
			overflow: hidden;
			transition: height 0.3s;

			.history-content-items {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.capsule-item {
					max-width: 160rpx;
					@include overflow-ellipsis;
					padding: 4rpx 25rpx;
					height: $item-height;
					line-height: $item-height;
					text-align: center;
					border-radius: 100rpx;
					font-size: 26rpx;
					color: #888;
					background-color: #f9f9f9;
					position: relative;

					.capsule-item-delete {
						position: absolute;
						right: 5rpx;
						top: 50%;
						transform: translateY(-50%);
						width: calc($item-height / 1.5);
						height: calc($item-height / 1.5);
						border-radius: 50%;
						background: #e1dad9;
						border: none;
						transition: all 0.2s;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}

	.hot-search-card-wrap {
		margin: 40rpx 30rpx 0 30rpx;
		width: 690rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		border: 1px solid #FDE8E7;
		padding: 20rpx 10rpx 10rpx 10rpx;
		position: relative;
		
		.hot-search-card-bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 690rpx;
			height: 144rpx;
			z-index: -1;
		}

		.hot-search-card-title {
			width: 100%;
			display: flex;
			align-items: center;
			color: #F96E11;
			font-size: 32rpx;
			font-weight: bold;

			.hot-search-card-icon {
				height: 45rpx;
				width: 45rpx;
			}

			.hot-search-card-title-text {
				margin-left: 10rpx;
				margin-top: 5rpx;
			}

		}

		.hot-search-card-image-content {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top: 30rpx;
			padding: 0 20rpx;


			.hot-search-card-item {
				$item-size: 90rpx;
				$border-radius: 15rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: $border-radius;
				height: $item-size;
				overflow: hidden;

				&:nth-child(1) {
					.hot-search-card-item-index {
						background-color: #FA740F;
					}
				}

				&:nth-child(2) {
					.hot-search-card-item-index {
						background-color: #FE8E08;
					}
				}

				&:nth-child(3) {
					.hot-search-card-item-index {
						background-color: #ee9681;
					}
				}

				.hot-search-card-item-index {
					position: absolute;
					left: -1rpx;
					top: -1rpx;
					width: calc($item-size / 2.5);
					height: calc($item-size / 2.5);
					line-height: calc($item-size / 2.5);
					text-align: center;
					font-size: 22rpx;
					color: #fff;
					background-color: #93A3C6;
					border-bottom-right-radius: 10rpx;
					box-shadow: rgba(255, 255, 255, 0.15) 0 6rpx 10rpx inset, rgba(255, 255, 255, 0.05) 0 3rpx 6rpx inset;
				}

				.hot-search-card-item-image {
					height: $item-size;
					width: $item-size;
					border-radius: $border-radius;
				}

				.hot-search-card-item-content {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					$margin-left: 20rpx;
					margin-left: $margin-left;
					width: calc(100% - #{$item-size +  $margin-left});
					height: $item-size;
					@include overflow-ellipsis;

					.hot-search-card-item-title {
						font-size: 26rpx;
					}

					.hot-search-card-item-describe {
						font-size: 24rpx;
						color: #999;
					}

				}
			}
		}

		.hot-search-card-content {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top: 30rpx;
			padding: 0 20rpx;

			.hot-search-card-item {
				$icon-size: 28rpx;
				display: flex;
				margin-bottom: 25rpx;
				align-items: center;
				align-content: center;

				@mixin front-item {
					box-shadow: rgba(255, 255, 255, 0.15) 0 6rpx 10rpx inset, rgba(255, 255, 255, 0.05) 0 3rpx 6rpx inset;
					clip-path: none;
					border-radius: $icon-size 0 $icon-size $icon-size;
				}

				&:nth-child(1) {
					.hot-search-card-item-index {
						background: #FA740F;
						@include front-item;
					}
				}

				&:nth-child(2) {
					.hot-search-card-item-index {
						background: #FE8E08;
						@include front-item;

					}
				}

				&:nth-child(3) {
					.hot-search-card-item-index {
						background: #ee9681;
						@include front-item;

					}
				}

				.hot-search-card-item-index {
					width: $icon-size;
					color: white;
					font-size: 22rpx;
					background: linear-gradient(0deg, rgb(231, 230, 230) 40%, rgba(209, 207, 207, 1) 100%);
					clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
					border-radius: 5rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.hot-search-card-item-content {
					margin-left: 20rpx;
					width: calc(100% - #{$icon-size + 20rpx});
					@include overflow-ellipsis;
					font-size: 30rpx;
				}

			}
		}

	}
</style>